<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: #000000;
				color: #AAAAAA;
			
			}
			
			
			.card{
				width: 100px;
				height: 100px;
				/* background: #000000;
				color: #AAAAAA; */
				
				border: .2px solid #FF6347;
			
			}
		
			.lf {
				float: left;
			}
			
			
			.clear-float{
				
				clear: both;
			}
			
			.d {
				
				border: 3px solid red;
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<!-- 
		断行  将 浮动理解为断行 
		如果将 浮动元素看成  流动的文字 ，清除 浮动 相当于 断行了。
		
		如果  不想受到浮动的影响， 我们一般会 在之后的位置 清除浮动
		 -->
		<div class="box lf  ">A</div>
		<div class="box lf clear-float">B</div>
		<div class="box lf clear-float">C</div>
		<div class="box  lf d">D</div>
	
		<div class="clear-float">
		</div>
		<!-- 下面 就是比较这 正常的布局了-->
		<div class="card">MMM.</div>
		<div class="card">MMM.</div>
		<div class="card">MMM.</div>
		<div class="card">MMM.</div>
	</body>
</html>
